Infobox Theme Code
Overview This is a guide on how TheWikiaEditMachine designs infoboxes for the wikias he works on how you can make an Infobox theme and send it to TWEM. Here, wikia's way of desiging infoboxes is compared to the way that TWEM does it and why. Compatibility Infoboxes have been on wikia for a very long time, and software gets old after a while. Some time ago, wikia introduced portable infoboxes which have a new markup, are compatibility across PCs, tablets, smartphones, and can be themed easier with CSS than traditional Infoboxes. Infobox themes do not appear on mobile devices because wikias have a mobile site and CSS does not apply to wikia's mobile sites. Before you make infobox themes, the infoboxes must be using the portable infobox markup (if TWEM has been active on your wiki, then chances are that the infoboxes are already portable), and have a "theme-source". This is specified in the infobox element in the markup. On wikias that TWEM works on, the theme source is set to "Theme" but theme does not appear as a input filed in the Infobox template (because doing so would make the theme field show up on pages making it look less professional). The Whole Infobox When TWEM first designed the Infobox themes, he used the stnadard ".portable-infobox.pi-theme" selector but wanted infoboxes to have multiple CSS themes. He switched to using the following selector for the whole infobox: asideNAME HERE aside is an HTML element which is what the infobox is. TWEM has only seen the aside element used on wikia for infoboxes. The reason why TWEM uses aside in his infobox selectors to avoid the chances of having the infobox theme CSS from targeting non infobox elements. When something in CSS is in brackets, that means it is select an element with a specific attribute and value. In this case, the css is targeting an element with a class that has the matching theme name. The * means it can be anywehre in the class value and even if there's other text in the class value, it still works. Without the *, the CSS would be selecting an element that SPECIFICALLY AND PRECISELY matches the class value. Infobox Titles Wikia normally uses ".portable-infobox .pi-title" to select Infobox Titles but twem switched to the following for selecting infobox titles: asideNAME HERE > h2 This selector selects an h2 element inside an infobox with a class attribute containing a specific value. There are multiple h2 elements in an infobox but the > makes so that the h2 has to be a direct child of the infobox and that applies only to the infobox title. The selector uses less characters leading to smaller CSS files, leading to shorter load times on weaker devices. TWEM wants to have a design that is sharp as possible without making compromises. Infobox Image Styling When It comes to Infoboxes with background images, it can look weird when viewing images with transparent backgrounds. The best way of dealing with this is by adding an image background. It would make sense to use a ".pi-image" selector but for the sake of shortness, TWEM uses the following selector: asideNAME HERE img This should work just as well as .pi-image with individual images and infobox galleries. Infobox Headers & Header Arrows TWEM sticks to the standard selector for Infobox headers which is ".pi-header" as there are no shorter ways of selecting infoboox headers. TWEM also likes to customize the color header arrow buttons, he originally did so with the selector ".pi-header:after" and change the border color which changed the arrow color. TWEM eventually added CSS to that the arrow element inherits the border color of the header to help write shorter CSS. The color for the arrow is now specified by entering in the border color in with the ".pi-header" selector. Infobox Gallery Tab and Header styling TWEM likes to have the infobox headers and gallery tabs the same styling. That is done with the following styling: